import { nextTick } from 'vue'
import { ref, reactive, watch, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import type { ComponentInternalInstance } from 'vue'

interface CallbackParams {
  bottom: number
  height: number
  id: string
  left: number
  right: number
  top: number
  width: number
}

/**
 * 获取元素信息
 * @param element id
 * @param currentInstance this
 * @param callback 回调函数
 */
export function useResize(
  element: string,
  currentInstance: ComponentInternalInstance | null,
  callback?: (param: CallbackParams) => void
) {
  const info = reactive({
    width: 0,
    height: 0,
  })

  onLoad(() => {
    uni
      .createSelectorQuery()
      .in(currentInstance)
      .select(element)
      .boundingClientRect((res: any) => {
        info.height = res.height
        if (callback) {
          callback(res as any)
        }
      })
      .exec()
  })

  return info
}

/**
 * 获取元素信息
 * @param element id
 * @param currentInstance this
 * @param callback 回调函数
 */
export function useSysInfo() {
  const info = reactive({
    windowWidth: 0,
    windowHeight: 0,
  })

  onLoad(() => {
    uni.getSystemInfo({
      success: (res) => {
        info.windowWidth = res.windowWidth
        info.windowHeight = res.windowHeight
        console.log(res, 'sys')
      },
    })
  })
  return info
}
